<template>
  <div>
    <h3 class="title">月度备忘</h3>
    <el-form :model="queryParams" inline size="small" style="margin-top: 10px">
      <el-form-item label-width="70px" label="派发月份">
        <el-date-picker
          v-model="queryParams.acctMonth"
          format="yyyy-MM"
          type="month"
          value-format="yyyyMM"
          placeholder="选择月"
          style="width: 180px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label-width="70px" label="影响账期">
        <el-date-picker
          v-model="queryParams.affectedMonth"
          format="yyyy-MM"
          type="month"
          value-format="yyyyMM"
          placeholder="选择月"
          clearable
          style="width: 180px"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label-width="50px" label="区域">
        <el-select v-model="queryParams.areaId" placeholder="请选择" clearable style="width: 180px">
          <el-option v-for="item in areaOptions" :key="item.id" :label="item.areaName" :value="item.areaId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="70px" label="派发类型">
        <el-select v-model="queryParams.flag" placeholder="请选择" clearable style="width: 180px">
          <el-option label="自动派单" value="0"></el-option>
          <el-option label="手工派单" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handle_search">查询</el-button>
        <el-button type="success" size="small" @click="toAdd(null)">新增</el-button>
        <el-button type="primary" size="small" @click="$refs.importDialog.dialogVisible = true">导入</el-button>
        <el-button type="warning" size="small" @click="handle_export">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      :header-cell-style="{background:'#d7e5fb',color:'#464C69', padding: '6px 0', 'font-size': '12px', 'text-align': 'center'}"
      style="width: 100%"
      class="tableTh28"
      border
      stripe
      ref="table"
      max-height="500"
    >
      <el-table-column
        v-for="item in tableTitle"
        :show-overflow-tooltip="!!item.tooltip"
        :key="item.id"
        :label="item.label"
        :prop="item.id"
        :min-width="item.width"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="180" align="center" fixed="right">
        <template slot-scope="{ row }">
          <span style="color:#7f92f7;cursor: pointer; margin-right: 10px" @click="toDetail(row.fileId)">查看详情</span>
          <span style="color:#7f92f7;cursor: pointer; margin-right: 10px" v-if="row.dispatchAim !== userName" @click="toAdd(row.fileId)">编辑</span>
          <span style="color:red;cursor: pointer;" v-if="row.dispatchAim !== userName" @click="handle_del(row.fileId)">删除</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 翻页 -->
    <div class="page" v-if="dataTotal">
      <span class="jumper">
        <span class="go" @click="searchSize">跳至</span>
        <input
          v-model="currentPageInput"
          @keyup="vaildSize"
          class="num"
          min="1"
          type="number"
          autocomplete="off"
        />页
      </span>
      <el-pagination
        layout="prev, pager, next, sizes"
        :page-sizes="[10, 50, 100]"
        @size-change="sizeChange"
        :page-size="queryParams.pageSize"
        :total="dataTotal"
        :current-page.sync="queryParams.currentPage"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

    <ImportDialog ref="importDialog" @refresh="getList"></ImportDialog>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import { downLoadExcelBody } from "@/utils/zipdownload.js";
import { getSessionStorage } from "@/common/js/storage";
export default {
  components: {
    ImportDialog: () => import("./importDialog.vue")
  },
  data(){
    return {
      queryParams: {
        acctMonth: "",
        affectedMonth: "",
        areaId: "",
        flag: "",
        currentPage: 1,
        pageSize: 10,
      },
      tableData: [],
      tableLoading: false,
      total: 0,
      dataTotal: 0,
      currentPageInput: 1,
      totalPage: "",
      tableTitle: [
        {id: 'proTime', label: '月份', width: ''},
        {id: 'invAmt', label: '总金额（万元）', width: '105'},
        {id: 'invAmtThisYear', label: '本年金额（万元）', width: '120'},
        {id: 'invAreaName', label: '区域', width: ''},
        {id: 'invSubCode', label: '科目', width: '160', tooltip: true},
        {id: 'invIncomeType', label: '收入分类', width: '100'},
        {id: 'invAcctMonth', label: '涉及月份', width: '100', tooltip: true},
        {id: 'moreInfo', label: '内容补充', width: '200'},
        {id: 'admitPerson', label: '录入人', width: ''},
        {id: 'eventTrigger', label: '事项触发者', width: '90'},
        {id: 'dispatchFlag', label: '是否需要派单', width: '100'},
        {id: 'dispatchAim', label: '派发对象', width: '100', tooltip: true,},
        {id: 'addText', label: '附件', width: '200', tooltip: true,},
        // {id: 'fileId', label: '文件id', width: '150'},
      ],
      areaOptions: [],
      disabledTime: "",

      userName: getSessionStorage("userName"),
    }
  },
  created(){
    this.getMonth();
    this.getArea();
  },
  methods: {
    async getList() {
      this.tableLoading = true;
      let form = { ...this.queryParams };
      $budgetAPI.monthlyMemoFileList(
        form,
        (res) => {
          this.alertError(res);
          if (res.code == 0) {
            this.tableData = res.content.items;
            this.dataTotal = res.content.totalNum;
            this.totalPage = res.content.totalPage;
          }
          this.tableLoading = false;
        },
        (err) => {
          this.tableLoading = false;
        }
      );
    },
    getMonth(){
      $budgetAPI.monthlyMemoQueryMonth({
        token: getCookie("token")
      },
      res => {
        this.disabledTime = res.content;
        this.queryParams.acctMonth = res.content;
        this.getList();
      })
    },
    getArea(){
      $budgetAPI.monthlyMemoQueryArea({
        token: getCookie("token")
      },
      res => {
        this.areaOptions = res.content;
      })
    },
    handle_search(){
      this.queryParams.currentPage = 1;
      this.getList();
    },
    //删除
    handle_del(fileId){
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          $budgetAPI.delMonthlyMemo(
            { fileId, token: getCookie("token") },
            (res) => {
              this.alertError(res);
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
                this.getList();
              }
            },
            (err) => {}
          );
        })
        .catch(() => {});
    },
    //新增、编辑
    toAdd(fileId){
      if(fileId){
        this.$router.push({
          path: '/budget/monthlyMemo/add',
          query: { seq: fileId },
        })
      } else {
        this.$router.push('/budget/monthlyMemo/add')
      }
    },
    //查看详情
    toDetail(fileId) {
      this.$router.push({
        path: "monthlyMemo/detail",
        query: { seq: fileId },
      });
    },
    //页码改变
    sizeChange(val) {
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(page) {
      this.queryParams.currentPage = +page;
      //将当前页传到保存的form表单
      // this.begin = page;
      this.getList();
    },
    searchSize() {
      if (this.currentPageInput) {
        this.queryParams.currentPage = this.currentPageInput;
        this.getList();
      }
    },
    vaildSize(e) {
      this.$nextTick(() => {
        if (!this.currentPageInput) {
          return;
        }
        if (!isNaN(this.currentPageInput)) {
          if (this.currentPageInput < 1) {
            this.currentPageInput = 1;
          } else if (+this.currentPageInput > this.totalPage) {
            this.currentPageInput = this.totalPage;
          } else {
            this.currentPageInput = this.currentPageInput;
          }
        } else {
          this.currentPageInput = 1;
        }
      });
    },
    handle_export(){
      let form = { ...this.queryParams };
      form.token = getCookie("token")
      delete form.pageSize;
      delete form.currentPage;
      downLoadExcelBody("/monthlyMemo/exportMemo", form, "月度备忘");
    },
  },
}
</script>
<style lang="scss" scoped>
  $fontColor: #6a82fd;
  $title: #666;
  $borderColor: #ddd;
  $fontSize: 16px;
  h3.title {
    padding: 15px 17px;
    border-bottom: 1px solid #dedede;
    text-align: left;
    color: $fontColor;
    font-size: $fontSize;
  }
  /deep/ .el-form-item__label {
		font-size: 13px;
		padding-right: 10px;
		line-height: 32px !important;
	}
  .page {
    display: flex;
    align-items: center;
    flex-flow: row-reverse;
    .sizes {
      margin-left: 20px;
      margin-right: 16px;
      .sizeinput {
        /deep/ .el-input__inner {
          width: 100px;
          border-radius: 0;
          border: 1px solid #aaa;
          height: 30px;
          font-size: 12px;
          color: #aaa;
          border-radius: 3px;
        }
        /deep/ .el-input__icon {
          line-height: 30px;
        }
      }
    }

    .jumper {
      font-size: 13px;
      color: #aaa;
      height: 30px;
      line-height: 30px;
      .go {
        display: inline-block;
        cursor: pointer;
        color: #aaa;
        &:hover {
          color: #6a82fd;
        }
      }

      .num {
        max-width: 40px;
        padding: 0 10px;
        height: 30px;
        line-height: 30px;
        vertical-align: middle;
        border-radius: 3px;
        border: 1px solid #aaa;
        color: #aaa;
        margin: 0 10px;
        text-align: center;
      }
      input[type="number"] {
        -moz-appearance: textfield;
      }
      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }
  }
  .page /deep/ .el-pagination .btn-next,
  .el-pagination .btn-prev {
    color: #aaa;
  }
  .page /deep/ .el-pagination {
    padding: 0;
  }
  .page /deep/ .el-pager li.active {
    background-color: #6a82fd;
    border-color: #6a82fd;
    color: #fff;
  }
  .page /deep/.el-pager li {
    min-width: 30px;
    height: 30px;
    border: 1px solid #aaa;
    color: #aaa;
    font-weight: 500;
    margin-right: 10px;
    border-radius: 5px;
    &:last-child {
      margin-right: 0;
    }
  }
  .page /deep/ .el-pagination .el-pagination__sizes .el-input__inner {
    border-color: #aaa;
    color: #aaa;
    height: 30px;
    line-height: 30px;
  }
  /deep/.el-card__body
    > .el-table .el-table__body-wrapper
    > table
    > tbody
    > tr {
    > td {
      color: #757b94;
      font-weight: 500;
    }
  }
  // /deep/ .el-card__body
  //   > .el-table >.el-table__header-wrapper
  //   > table
  //   > thead {
  //   color: #636d9a;
  // }
  /deep/ .el-table {
    .el-table__row {
      td {
        padding: 8px 0 !important;
      }
    }
    .cell {
      font-size: 12px !important;
      // color: #000;
    }
  }
</style>